<template>
	<div id="tenant_list">
		

		<el-table :data="list" v-loading="loading" stripe>
			<el-table-column label="id" prop="id" align="center" width="80"></el-table-column>
			<el-table-column label="当前余额" prop="balance" align="center"></el-table-column>
			<el-table-column label="累计收益金额" prop="total_balance" align="center"></el-table-column>
			<el-table-column label="累计充值金额" prop="recharge_amount" align="center"></el-table-column>
			<el-table-column label="域名" prop="domain_name" align="center"></el-table-column>
			<el-table-column label="网站名称" prop="company" align="center"></el-table-column>
			<el-table-column label="分站联系手机" prop="contact_number" align="center" width="120"></el-table-column>
			<el-table-column label="微信" prop="wechat" align="center">
				<template slot-scope="scope">
					<el-image style="width: 80px; height: 80px" :src="scope.row.wechat" :preview-src-list="[scope.row.wechat]"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="qq" prop="qq" align="center"></el-table-column>
			<el-table-column label="网站logo" prop="logo" align="center">
				<template slot-scope="scope">
					<el-image style="width: 80px; height: 80px" :src="scope.row.logo|fullPath" :preview-src-list="[scope.row.logo]"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="网站图标" prop="favicon" align="center">
				<template slot-scope="scope">
					<el-image style="width: 80px; height: 80px" :src="scope.row.favicon|fullPath" :preview-src-list="[$envConfig.serviceUrl+scope.row.favicon]"></el-image>
				</template>
			</el-table-column>
			<!-- <el-table-column label="移动端头像" prop="heads" align="center">
				<template slot-scope="scope">
					<el-image style="width: 80px; height: 80px" :src="scope.row.heads|fullPath" :preview-src-list="[$envConfig.serviceUrl+scope.row.heads]"></el-image>
				</template>
			</el-table-column> -->
			<el-table-column label="网站标题" prop="title" align="center"></el-table-column>
			<el-table-column label="状态" prop="status" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.status == -1" class="error">已禁用</span>
					<span v-if="scope.row.status == 1">正常</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center">
				<template slot-scope="scope">
					{{$moment(scope.row.createTime).format('Y-MM-DD HH:mm')}}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="250">
				<template slot-scope="scope">
					<p>
						<el-button @click="switchOperation(scope.row.id, -1)" type="text" v-if="scope.row.status == 1" class="error">禁用</el-button>
						<el-button @click="switchOperation(scope.row.id, 1)" type="text" v-if="scope.row.status == -1">启用</el-button>
						<el-button @click="toUpdate(scope.row)" type="text">修改分站</el-button>
					</p>
					<p>
						<el-button @click="costParams.tenantId = scope.row.id; goodsCostVisible = true" type="text">设置商品成本</el-button>
						<el-button @click="costParams.tenantId = scope.row.id; expressCostVisible = true" type="text">设置快递成本</el-button>
						<el-button @click="showTableDialog(scope.row.id)" type="text">分站账号列表</el-button>
					</p>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination 
			class="page"
			background
			@size-change="handleSizeChange" 
			@current-change="getList" 
			:current-page.sync="params.pageNo" 
			:page-sizes="[10, 20, 50, 100]" 
			:page-size="params.pageSize" 
			layout="total, sizes, prev, pager, next, jumper" 
			:total="total">
		</el-pagination>
		
		<el-dialog
			:title="formData.id ? '修改': '添加'" 
			:visible.sync="dialogVisible" 
			width="800px" 
			center 
			:before-close="reset"
			:close-on-click-modal="false"
			>
			<el-form :model="formData" :rules="rules" ref="formData" label-width="100px">
				<div class="dialog_main">
					<div class="dialog_left">
						<el-form-item label="网站名称" prop="company">
							<el-input v-model="formData.company" placeholder="请输入网站名称"></el-input>
						</el-form-item>
						<el-form-item label="域名" prop="domain_name">
							<el-input v-model="formData.domain_name" placeholder="请输入域名"></el-input>
						</el-form-item>
						<el-form-item label="初始账号" prop="account" v-if="!formData.id">
							<el-input  v-model="formData.account" placeholder="请输入初始账号"></el-input>
						</el-form-item>
						<el-form-item label="客服手机号码">
							<el-input v-if="formData.phone"  maxlength="11" v-model="formData.phone" placeholder="请输入手机号码"></el-input>
							<el-input v-else v-model="formData.phone" placeholder="请输入客服手机号码" maxlength="11"></el-input>
						</el-form-item>
						<el-form-item label="分站联系手机">
							<el-input v-if="formData.contact_number"  maxlength="11" v-model="formData.contactNumber" placeholder="请输入手机号码"></el-input>
							<el-input v-else v-model="formData.contactNumber" placeholder="请输入分站联系手机号码" maxlength="11"></el-input>
						</el-form-item>
						<el-form-item label="登录密码" prop="password" v-if="!formData.id">
							<el-input v-model="formData.password" placeholder="请输入分站管理员登录密码" type="password" maxlength="18"></el-input>
						</el-form-item>
						<el-form-item label="确认密码" prop="rePassword" v-if="!formData.id">
							<el-input v-model="formData.rePassword" placeholder="请再次输入密码" type="password" maxlength="18"></el-input>
						</el-form-item>
						<el-form-item label="QQ号" prop="qq">
							<el-input v-model="formData.qq" placeholder="请输入QQ号"></el-input>
						</el-form-item>
						<el-form-item label="首页标题" prop="title">
							<el-input v-model="formData.title" placeholder="请输入首页标题"></el-input>
						</el-form-item>
						<el-form-item label="首页关键词" prop="keywords">
							<el-input type="textarea" v-model="formData.keywords" placeholder="请输入首页关键词"></el-input>
						</el-form-item>
						<el-form-item label="首页描述" prop="descr">
							<el-input type="textarea" v-model="formData.descr" placeholder="请输入首页描述"></el-input>
						</el-form-item>
						<el-form-item label="备案号" prop="beianhao">
							<el-input v-model="formData.beianhao" placeholder="请输入备案号"></el-input>
						</el-form-item>
					</div>
					<div class="dialog_right">
						<el-form-item label="微信二维码" prop="wechat">
							<Upload
								ref="qrcode"
								:bigBox="true"
								:isMultiple="false"
								:limit_size="1"
								v-model="formData.wechat"
							 />
							<!-- <imgUpload :imgUrl = 'formData.wechat' @change="wechatChange"></imgUpload> -->
						</el-form-item>
						<el-form-item label="favicon" prop="favicon">
							<Upload
							ref="favicon"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							v-model="formData.icon"
							 />
							<!-- <imgUpload :imgUrl = 'formData.icon' @change="iconChange"></imgUpload> -->
						</el-form-item>
						<el-form-item label="logo" prop="logo">
							<Upload
								ref="logo"
								:bigBox="true"
								:isMultiple="false"
								:limit_size="1"
								v-model="formData.logo"
							 />
							<!-- <imgUpload :imgUrl = 'formData.logo' @change="logoChange"></imgUpload> -->
						</el-form-item>
						<el-form-item label="移动端头像" prop="heads">
							<Upload
							ref="heads"
							:bigBox="true"
							:isMultiple="false"
							:limit_size="1"
							v-model="formData.heads"
							 />
							<!-- <imgUpload :imgUrl = 'formData.icon' @change="iconChange"></imgUpload> -->
						</el-form-item>
					</div>
				</div>
				
			</el-form>
			<div class="align-center">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="write" :loading="formLoading">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog 
			title="设置商品成本" 
			width="80%" 
			:close-on-click-modal="false"
			center  
			:visible.sync="goodsCostVisible">
			<el-table :data="costList" v-loading="costLoading">
				<el-table-column label="类型" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.other_type === 1">自有仓库</span>
						<span v-if="scope.row.other_type === 2">爱代发</span>
						<span v-if="scope.row.other_type === 3">就代发</span>
						<span v-if="scope.row.other_type === 4">瑶瑶</span>
						<span v-if="scope.row.other_type === 5">星辰</span>
						<span v-if="scope.row.other_type === 6">海淘</span>
						<span v-if="scope.row.other_type === 7">代发发</span>
					</template>
				</el-table-column>
				<el-table-column label="商品id" prop="id" align="center"></el-table-column>
				<el-table-column label="商品名称" prop="name" align="center"></el-table-column>
				<el-table-column label="商品主图" prop="cover" align="center">
					<template slot-scope="scope">
						<el-image style="width: 60px; height: 60px" :src="scope.row.cover|fullPath" :preview-src-list="[$envConfig.serviceUrl+scope.row.cover]"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="仓库名称" prop="name" align="center"></el-table-column>
				<el-table-column label="商品成本" prop="cost" align="center"></el-table-column>
				<el-table-column label="租户成本"  align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.tenant_cost" placeholder="请输入该租户的成本" @blur="setTenantGoodsCost(scope.row)"></el-input>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="align-center margin_top20"
				background
				@current-change="getGoodsCostList" 
				:current-page.sync="costParams.pageNo" 
				:page-size="costParams.pageSize" 
				layout="total, prev, pager, next" 
				:total="costTotal">
			</el-pagination>
		</el-dialog>
		
		<el-dialog
			title="设置快递成本" 
			width="80%" 
			:close-on-click-modal="false"
			center  
			:visible.sync="expressCostVisible">
			<el-table :data="costList" v-loading="costLoading">
				<el-table-column label="类型" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.other_type === 1">自有仓库</span>
						<span v-if="scope.row.other_type === 2">爱代发</span>
						<span v-if="scope.row.other_type === 3">就代发</span>
						<span v-if="scope.row.other_type === 4">瑶瑶</span>
						<span v-if="scope.row.other_type === 5">星辰</span>
						<span v-if="scope.row.other_type === 6">海淘</span>
						<span v-if="scope.row.other_type === 7">代发发</span>
					</template>
				</el-table-column>
				<el-table-column label="仓库名称" align="center">
					<template slot-scope="scope">
						{{selectStore(scope.row.store_id)}}
					</template>
				</el-table-column>
				<el-table-column label="快递公司名称" prop="shipper_name" align="center"></el-table-column>
				<el-table-column label="网点名称" prop="company" align="center"></el-table-column>
				<el-table-column label="发货人姓名" prop="name" align="center"></el-table-column>
				<el-table-column label="重量范围/kg" prop="max_weight" align="center"></el-table-column>
				<el-table-column label="快递成本" prop="cost" align="center"></el-table-column>
				<el-table-column label="租户成本"  align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.tenant_cost" placeholder="请输入该租户的成本" @blur="setTenantExpressCost(scope.row)"></el-input>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="align-center margin_top20"
				background
				@current-change="getExpressCostList" 
				:current-page.sync="costParams.pageNo" 
				:page-size="costParams.pageSize" 
				layout="total, prev, pager, next" 
				:total="costTotal">
			</el-pagination>
		</el-dialog>
		
		<!-- 修改密码 -->
		<el-dialog
			title="修改密码" 
			width="400px"
			@close="closePasswordDialog"
			:close-on-click-modal="false"
			center  
			:visible.sync="passwordVisible">
			<el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="80px">
				<el-form-item label="密码" prop="password">
					<el-input v-model="passwordForm.password" autocomplete="off" placeholder="请输入密码" type="password"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="rePassword">
					<el-input v-model="passwordForm.rePassword" autocomplete="off"  placeholder="请再次输入密码" type="password"></el-input>
				</el-form-item>
			</el-form>
			<div class="align-center">
				<el-button @click="passwordVisible = false">取 消</el-button>
				<el-button type="primary" @click="setPassword" :loading="passwordLoading">确 定</el-button>
			</div>
		</el-dialog>
		
		<!-- 分站账号 -->
		<el-dialog 
			title="分站账号" 
			:visible.sync="dialogTableVisible"
			@close="closeDialog">
			<el-table :data="tableList" v-loading="loading">
				<el-table-column property="id" label="ID"></el-table-column>
				<el-table-column property="account" label="账号" width="150"></el-table-column>
				<el-table-column label="创建时间" width="200">
					<template slot-scope="scope">
						{{$common.getDate(scope.row.create_time)}}
					</template>
				</el-table-column>
				<el-table-column label="上次登录时间" width="200">
					<template slot-scope="scope">
						{{$common.getDate(scope.row.login_time)}}
					</template>
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<span v-if="scope.row.status == 1">正常</span>
						<span v-if="scope.row.status == -1">冻结</span>
					</template>
				</el-table-column>
				<el-table-column property="remark" label="备注"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="passwordForm.id = scope.row.id; passwordVisible = true" type="text">修改密码</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination 
				class="page"
				background
				@current-change="getTenantAccount" 
				:current-page.sync="tableParams.pageNo" 
				:page-size="tableParams.pageSize" 
				layout="total, prev, pager, next, jumper" 
				:total="tableTotal">
			</el-pagination>
		</el-dialog>
	</div>
</template>

<script>
	import Upload from '@/components/utils/Upload'
	import rsa from '@/utils/rsa'
	
	export default {
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 10,
					isCount: true,
				},
				tableParams: {
					pageNo: 1,
					pageSize : 10,
					isCount: true,
					tenantId: '',
				},
				list: [],
				tableList: [],
				total: 0,
				tableTotal: 0,
				loading: false,
				selectData: [],
				dialogVisible: false,
				dialogTableVisible: false,
				formLoading: false,
				formData: {
				},
				rules: {
					account: [
						{ required:true, message: '请输入初始账号', trigger: 'blur'}
					],
					realmName: [
						{ required: true, message: '请输入分站域名', trigger: 'blur' }
					],
					domainName: [
						{ required: true, message: '请输入分站首页', trigger: 'blur' }
					],
					password: [
						{ required: true, trigger: 'blur', validator: (rule, value, callback)=>{
							if(!this.formData.id){
								if(!value){
									callback('请输入密码')
								}else if(value.length < 6 || value.length > 18){
									callback('密码长度必须为6-18位')
								}else{
									callback()
								}
							}else{
								callback()
							}
						}},
					],
					rePassword: { 
						required: true, trigger: 'blur', validator: (rule, value, callback)=>{
							if(!this.formData.id){
								if(!value){
									callback('请再次输入密码')
								}else if(value !== this.formData.password){
									callback('两次输入的密码不正确')
								}else{
									callback() 
								}
							}else{
								callback()
							}
						} 
					},
					qq: [
						{ required: true, message: '请输入qq号', trigger: 'blur' }
					],
					wechat: [
						{ trigger: 'blur', validator:(rule, value, callback)=>{
							if(this.formData.wechat == ''){
								callback('请上传微信二维码');
							}else{
								callback();
							}

						}}
					],
					favicon: [
						{ trigger: 'blur', validator:(rule, value, callback)=>{
							if(this.formData.favicon == ''){
								callback('请上传favicon')
							}else{
								callback()
							}
						}}
					],
					logo: [
						{ trigger: 'blur', validator:(rule, value, callback)=>{
							if(this.formData.logo == ''){
								callback('请上传logo')
							}else{
								callback()
							}
						}}
					],
					heads: [
						{ trigger: 'blur', validator:(rule, value, callback)=>{
							if(this.formData.heads == ''){
								callback('请上传移动端头像')
							}else{
								callback()
							}
						}}
					],
					title: [
						{ required: true, message: '请输入分站Title', trigger: 'blur' }
					],
					keywords: [
						{ required: true, message: '请输入关键词', trigger: 'blur' }
					],
					descr: [
						{ required: true, message: '请输入分站简介', trigger: 'blur' }
					],
				},
				// 设置成本
				goodsCostVisible: false,
				costRules: {
				},
				passwordVisible: false,
				passwordLoading: false,
				passwordForm: {
					id: '',
					password: '',
					rePassword: ''
				},
				passwordRules:{
					password: [
						{ message: '请输入密码', required: true, trigger: 'blur'},
						{ message: '密码长度必须为6-18位', trigger: 'blur', max: 18, min: 6 }
					],
					rePassword: [
						{required: true, trigger: 'blur', validator: (rule, value, callback)=>{
							if(!value){
								callback('请再次输入密码')
							}else if(value !== this.passwordForm.password){
								callback('两次输入的密码不一致')
							}else{
								callback()
							}
						}},
					]
				},
				
				costParams: {
					pageNo: 1,
					pageSize: 10,
				},
				costTotal: 0,
				costList: [],
				costLoading: false,
				timeArr:[],
				expressCostVisible: false ,
				tenantList: [],
				goodsStoreList: [],
			};
		},

		components: {
			Upload
		},

		watch: {
			goodsCostVisible(value){
				if(value){
					this.costList = []
					this.getGoodsCostList()
				}
			},
			
			expressCostVisible(value){
				if(value){
					this.costList = []
					this.getExpressCostList()
				}
			}
		},

		create() {

		},

		mounted() {
			this.getTenantList();
			this.search();
			this.getStore();
		},

		methods: {
			getStore() {
				this.$request.post({
					closeErrInfo: true,
					closeCodeInfo: true,
					url: '/ReportApi/admin/storetlist',
					success: result => {
						this.goodsStoreList = result
					}
				})
			},
			selectStore(storeId) {
				if (!this.goodsStoreList.length) {
					return;
				}
				var item = this.goodsStoreList[this.goodsStoreList.findIndex(item => item.id == storeId)];
				if(item){
					return item.name
				}else{
					return '';
				}
			},
			closePasswordDialog(){
				this.passwordForm.password = ''
				this.passwordForm.rePassword = ''
				this.$refs['passwordForm'].resetFields();
			},
			closeDialog(){
				this.tableParams.isCount = true
			},
			showTableDialog(id){
				this.dialogTableVisible = true
				this.tableParams.tenantId = id
				this.getTenantAccount()
			},
			getTenantAccount(){
				this.loading = true
				this.$request.post({
					url: '/ReportApi/admin/accountList',
					params:this.tableParams,
					success: res => {
						this.tableList = res[0]
						if(this.tableParams.isCount){
							this.tableParams.isCount = false 
							this.tableTotal = res[1]
						}
					},
					finally: res => {
						this.loading = false
					}
				})
			},
			timeChange(val){
				if(val){
					this.params.startTime = this.$common.getDate(val[0]);
					this.params.endTime = this.$common.getDate(val[1]);
				}else{
					this.params.startTime = ''
					this.params.endTime = ''
				}
			},
			handleClose(done){
				if(!this.formLoading){
					this.reset()
					done() 
				}
			},
			
			handleSizeChange(value) {
				this.params.pageSize = value 
				this.search()
			},
			search(){
				this.params.pageNo = 1
				this.params.isCount = true 
				this.getList();
			},
			
			getList() {
				this.loading = true
				this.$request.post({
					url: '/ReportApi/admin/tenantlists',
					params: this.params,
					success: result =>{
						this.list = result[0] 
						if(this.params.isCount){
							this.params.isCount = false 
							this.total = result[1]
						}
					},
					finally: ()=>{
						this.loading = false 
					}
				})
			},
			
			write(){
				this.formData.wechat = this.$refs.qrcode.path_list[0]?this.$refs.qrcode.path_list[0].path:'';
				this.formData.favicon = this.$refs.favicon.path_list[0]?this.$refs.favicon.path_list[0].path:'';
				this.formData.logo = this.$refs.logo.path_list[0]?this.$refs.logo.path_list[0].path:'';
				this.formData.heads = this.$refs.heads.path_list[0]?this.$refs.heads.path_list[0].path:'';
				this.$refs['formData'].validate((valid) => {
					if(valid){
						if(this.formLoading){
							return; 
						}
						var params = JSON.parse(JSON.stringify(this.formData))
						if(!this.formData.id){
							params.password = rsa.encryptByPublicKey(params.password)
						}
						this.formLoading = true
						var url = '/ReportApi/admin/' + (this.formData.id ? 'updatelist' : 'addlist') 
						this.$request.post({
							url,
							params,
							success: result => {
								this.$message.success('操作成功')
								this.getList();
								this.dialogVisible = false 
							},
							finally: ()=>{
								this.formLoading = false 
							}
						})
					}
				})
			},
			
			switchOperation(tenantId, status){
				this.$request.post({
					url: '/ReportApi/admin/switchs',
					params: {
						tenantId,
						status
					},
					success: result =>{
						this.$message.success('操作成功')
						this.getList()
					}
				})
			},
			
			
			setPassword(){
				this.$refs['passwordForm'].validate((valid) => {
					if(valid){
						this.passwordLoading = true 
						this.$request.post({
							url: '/ReportApi/admin/updatePassword',
							params: {
								id: this.passwordForm.id,
								password: this.passwordForm.password
							},
							success: result =>{
								this.$message.success('操作成功')
								this.passwordForm.id = ''
								this.passwordForm.password = ''
								this.passwordForm.rePassword = ''
								this.passwordVisible = false 
							},
							finally: ()=>{
								this.passwordLoading = false 
							}
						})
					}
				})
			},
			
			getGoodsCostList(){
				this.costLoading = true 
				this.$request.post({
					url: '/ReportApi/admin/getTenantGoodsCostList',
					params: this.costParams,
					success: result =>{
						this.costList = result[0] 
						this.costTotal = result[1]
					},
					finally: ()=>{
						this.costLoading = false 
					}
				})
			},
			
			getExpressCostList(){
				this.costLoading = true
				this.$request.post({
					url: '/ReportApi/admin/getTenantExpressCostList',
					params: this.costParams,
					success: result =>{
						this.costList = result[0] 
						this.costTotal = result[1] 
					},
					finally: ()=>{
						this.costLoading = false 
					}
				})
			},
			
			setTenantGoodsCost(data){
				this.$request.post({
					url: '/ReportApi/admin/setGoodsCost',
					params: {
						id: data.id,
						cost: data.tenant_cost 
					},
					success: result =>{
						this.$message.success('设置成功')
					}
				})
			},
			
			setTenantExpressCost(data){
				this.$request.post({
					url: '/ReportApi/admin/setExpressCost',
					params: {
						id: data.id,
						tenantId: data.tenant_id,
						cost: data.tenant_cost 
					},
					success: result =>{
						this.$message.success('设置成功')
					}
				})
			},
			
			reset(done){
				for(var key in this.formData){
					this.formData[key] = ''
				}
				this.$refs.qrcode.path_list = [];
				this.$refs.favicon.path_list = [];
				this.$refs.logo.path_list = [];
				this.$refs.heads.path_list = [];
				done();
			},
			
			toUpdate(data) {
				this.dialogVisible = true 
				this.formData = JSON.parse(JSON.stringify(data))
				delete this.formData.createtime;
				setTimeout(() => {
					this.$refs.qrcode.path_list = [{path: this.$envConfig.serviceUrl + this.formData.wechat}];
					this.$refs.favicon.path_list = [{path: this.$envConfig.serviceUrl + this.formData.favicon}];
					this.$refs.logo.path_list = [{path: this.$envConfig.serviceUrl + this.formData.logo}];
					this.$refs.heads.path_list = [{path: this.$envConfig.serviceUrl + this.formData.heads}];
				},500);
			},

			getTenantList(){
				this.$request.post({
					url: '/ReportApi/admin/tenantlist',
					success: res => {
						this.tenantList = res
					}
				})
			},
			
		},

		beforeDestroy() {}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.page{
		text-align: right;
		margin-top: 20px;
	}
	.dialog_main {
		display: flex;
		justify-content: space-between;
	}
	.dialog_left {
		width: 400px;
	}
	.dialog_right {
		width: 300px;
	}
</style>
